<div class="pull-right">
    <p class="m0">
        <small class="mr">Single column</small>
        <label class="switch pull-right">
            <input type="checkbox" checked="checked" [(ngModel)]="timelineAlt" />
            <span></span>
        </label>
    </p>
</div>
<div class="content-heading">Timeline</div>
<!-- START timeline-->
<ul [ngClass]="timelineAlt ? 'timeline-alt' : 'timeline'">
    <li class="timeline-separator" data-datetime="Now"></li>
    <!-- START timeline item-->
    <li>
        <div class="timeline-badge primary">
            <em class="fa fa-users"></em>
        </div>
        <div class="timeline-panel">
            <div class="popover" [ngClass]="timelineAlt ? 'right' : 'left'">
                <h4 class="popover-title">Client Meeting</h4>
                <div class="arrow"></div>
                <div class="popover-content">
                    <p>Av 123 St - Floor 2
                        <br/>
                        <small>Pellentesque ut diam velit, eget porttitor risus. Nullam posuere euismod volutpat.</small>
                    </p>
                </div>
            </div>
        </div>
    </li>
    <!-- END timeline item-->
    <!-- START timeline item-->
    <li class="timeline-inverted">
        <div class="timeline-badge warning">
            <em class="fa fa-phone"></em>
        </div>
        <div class="timeline-panel">
            <div class="popover right">
                <h4 class="popover-title">Call</h4>
                <div class="arrow"></div>
                <div class="popover-content">
                    <p>Michael <a href="tel:+011654524578">(+011) 6545 24578 ext. 132</a>
                        <br/>
                        <small>Pellentesque ut diam velit, eget porttitor risus. Nullam posuere euismod volutpat.</small>
                    </p>
                </div>
            </div>
        </div>
    </li>
    <!-- END timeline item-->
    <!-- START timeline separator-->
    <li class="timeline-separator" data-datetime="Yesterday"></li>
    <!-- END timeline separator-->
    <!-- START timeline item-->
    <li>
        <div class="timeline-badge danger">
            <em class="fa fa-video-camera"></em>
        </div>
        <div class="timeline-panel">
            <div class="popover" [ngClass]="timelineAlt ? 'right' : 'left'">
                <h4 class="popover-title">Conference</h4>
                <div class="arrow"></div>
                <div class="popover-content">
                    <p>Join development group</p>
                    <small>
                  <a href="skype:echo123?call">
                     <em class="fa fa-phone"></em>Call the Skype Echo</a>
               </small>
                </div>
            </div>
        </div>
    </li>
    <!-- END timeline item-->
    <!-- START timeline item-->
    <li class="timeline-inverted">
        <div class="timeline-panel">
            <div class="popover right">
                <h4 class="popover-title">Appointment</h4>
                <div class="arrow"></div>
                <div class="popover-content">
                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam.</p>
                    <div class="btn-group">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown" data-play="fadeIn">
                            <em class="fa fa-paperclip"></em>
                        </a>
                        <ul *dropdownMenu class="dropdown-menu text-left">
                            <li>
                                <a href="#">
                                    <em class="fa fa-download"></em>Download</a>
                            </li>
                            <li>
                                <a href="#">
                                    <em class="fa fa-share"></em>Send to</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <em class="fa fa-times"></em>Delete</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <!-- END timeline item-->
    <!-- START timeline item-->
    <li>
        <div class="timeline-badge info">
            <em class="fa fa-plane"></em>
        </div>
        <div class="timeline-panel">
            <div class="popover" [ngClass]="timelineAlt ? 'right' : 'left'">
                <h4 class="popover-title">Fly</h4>
                <div class="arrow"></div>
                <div class="popover-content">
                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                </div>
            </div>
        </div>
    </li>
    <!-- END timeline item-->
    <!-- START timeline item-->
    <li>
        <div class="timeline-panel">
            <div class="popover" [ngClass]="timelineAlt ? 'right' : 'left'">
                <h4 class="popover-title">Appointment</h4>
                <div class="arrow"></div>
                <div class="popover-content">
                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                </div>
            </div>
        </div>
    </li>
    <!-- END timeline item-->
    <!-- START timeline separator-->
    <li class="timeline-separator" data-datetime="2014-05-21"></li>
    <!-- END timeline separator-->
    <!-- START timeline item-->
    <li class="timeline-inverted">
        <div class="timeline-badge success">
            <em class="fa fa-music"></em>
        </div>
        <div class="timeline-panel">
            <div class="popover right">
                <h4 class="popover-title">Relax</h4>
                <div class="arrow"></div>
                <div class="popover-content">
                    <p>Listen some music</p>
                </div>
            </div>
        </div>
    </li>
    <!-- END timeline item-->
    <!-- START timeline item-->
    <li class="timeline-end">
        <a class="timeline-badge" href="#">
            <em class="fa fa-plus"></em>
        </a>
    </li>
    <!-- END timeline item-->
</ul>
<!-- END timeline-->
